<!--提货卡激活记录  ！！！！-->
<template>
  <div>
    <Card :bordered="false" dis-hover class="mt15 ivu-mt" :padding="0">
      <div class="new_card_pd">
        <Form ref="tableFrom" inline
              :model="tableFrom" :label-width="labelWidth"
              :label-position="labelPosition" @submit.native.prevent>

          <FormItem label="购买单位名称">
            <Input v-model="tableFrom.company" placeholder="请输入购买单位名称" style="width: 250px;margin-right:14px"/>
          </FormItem>
          <FormItem label="激活卡编号">
            <Input v-model="tableFrom.card_no" placeholder="请输入提货卡开始或结束任一完整卡编号Eg：'NO.2022000014'" style="width: 380px;margin-right:14px" />
          </FormItem>
          <FormItem label="激活人员">
            <Input v-model="tableFrom.name" placeholder="请输入激活人名称" style="width: 250px;margin-right:14px" />
          </FormItem>
          <FormItem label="提货卡名称：" label-for="coupon_title">
            <Input v-model="tableFrom.recharcard_name" placeholder="请输入提货卡名称" @on-search="userSearchs"
                   style="width: 250px;margin-right:14px"/>
            <Button type="primary" @click="orderSearch()" style="margin-right:14px">查询</Button>
          </FormItem>
        </Form>
      </div>
    </Card>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <!-- <Button v-auth="['admin-marketing-store_coupon-add']" type="primary" @click="add">激活提货卡</Button> -->
      <Button v-auth="['admin-user-recharcard-create']" style="margin-left:20px;" type="primary" @click="exportList" >下载导出</Button>
      <Table :columns="columns1" :data="tableList" ref="table" class="ivu-mt"
             :loading="loading" highlight-row
             no-userFrom-text="暂无数据"
             no-filtered-userFrom-text="暂无筛选结果">
        <template slot-scope="{ row }" slot="money">
          <span>{{ row.money }}元</span>
        </template>

        <template slot-scope="{ row }" slot="activation_end_no">
          <span>{{row.activation_end_no}}</span>
        </template>
        <template slot-scope="{ row }" slot="activation_start_no">
          <span>{{row.activation_start_no}}</span>
        </template>
        <template slot-scope="{ row }" slot="buy_company">
          <span>{{row.buy_company}}</span>
        </template>
        <template slot-scope="{ row }" slot="recharcard_title">
          <span>{{row.recharcard.recharcard_title}}</span>
        </template>

        <template slot-scope="{ row }" slot="add_time">
          <span>{{row.add_time}}</span>
        </template>
        <template slot-scope="{ row }" slot="admin">
          <span>{{row.admin.account}}</span>
        </template>
        <template slot-scope="{ row }" slot="activation_num">
          <span>{{row.activation_num}}</span>
        </template>

        <!--        <template slot-scope="{ row }" slot="card_no">-->
        <!--          <div v-html="row.card_no"></div>-->
        <!--        </template>-->
        <!--        <template slot-scope="{ row }" slot="action">-->
        <!--          <a @click="receive(row)" style="margin-right:20px;">作废</a>-->
        <!--          <a @click="couponDel(row)" v-if="rowId != 0">激活</a>-->
        <!--        </template>-->
      </Table>
      <div class="acea-row row-right page">
        <Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
              :page-size="tableFrom.limit"/>
      </div>
    </Card>
    <Modal
        v-model="modal"
        title="提示"
        @on-cancel="cancel">
      <p>确定要删除吗?</p>
    </Modal>
  </div>
</template>

<script>
// import {createList} from '@/api/marketing.js'
import {recharcardUser,recharcardActivateOne,activationList,storeRecharcardActivation} from '@/api/user.js'
import exportExcel from "@/utils/newToExcel.js";
import {mapState} from "vuex";
export default {
  name: "list.vue",
  data() {
    return {
      modals2: false,
      modal:false,
      id:0,
      rowId:0,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24
      },
      time:'',
      formData:{
        use_company:'',
        recharcard_use_type:1,
        recharcard_use_time:''
      },
      labelShow:false,
      loading: false,
      recharcard_rule:'',
      columns1: [
        {
          title: "ID",
          key: "id",
          width: 80,
          align:'center'
        },
        {
          title: "提货卡名称123",
          slot: "recharcard_title",
          minWidth: 180,
          align:'center'
        },
        {
          title: "购买单位名称",
          slot: "buy_company",
          minWidth: 120,
          align:'center'
        },
        {
          title: "开始激活卡编号",
          slot: "activation_start_no",
          minWidth: 140,
          align:'center'
        },
        {
          title: "结束激活卡编号",
          slot: "activation_end_no",
          minWidth: 140,
          align:'center'
        },

        {
          title: "金额",
          slot: "money",
          align:'center',
          minWidth: 180
        },
        {
          title: "创建时间",
          slot: "add_time",
          align:'center',
          minWidth: 160
        },
        {
          title: "激活人员",
          slot: "admin",
          align:'center',
          minWidth: 110
        },
        {
          title: "激活数量",
          slot: "activation_num",
          align:'center',
          minWidth: 110
        }
      ],
      tableFrom: {
        company:'',
        name:'',
        recharcard_name:'',
        card_no:'',
        page: 1,
        limit: 15
      },
      receive_type: "",
      tableList: [],
      total: 0,
      FromData: null,
      receiveList: [],
      loading2: false,
      total2: 0,
      receiveFrom: {
        page: 1,
        limit: 15
      },
      rows: {}
    };
  },
  created(){
    this.createList()
  },
  mounted(){
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 96;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  methods:{
    //点击导出列表
    async exportList(){
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let excelData = JSON.parse(JSON.stringify(this.tableFrom));
      excelData.page = 1;
      excelData.product_id= this.$route.query.product_id || "";
      for (let i = 0; i < excelData.page + 1; i++) {
        let lebData = await this.storeRecharcard(excelData);
        if (!fileName) fileName = lebData.filename;
        if (!filekey.length) {
          filekey = lebData.filekey;
        }
        if (!th.length) th = lebData.header;
        if (lebData.export.length) {
          data = data.concat(lebData.export);
          excelData.page++;
        }
      }
      exportExcel(th, filekey, fileName, data);
    },
    storeRecharcard(excelData){
      return new Promise((resolve, reject) => {
        storeRecharcardActivation(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
    // 表格搜索
    userSearchs() {
      this.tableFrom.page = 1;
      this.createList();
    },
    //分页
    pageChange(e){
      this.tableFrom.page = e
      this.createList()
    },
    cancel(){
      this.modal = false
    },

    /**
     * 提货卡激活记录列表
     */
    createList(){
      activationList(this.tableFrom).then(res=>{
        this.tableList = res.data.list
        this.total = res.data.count
      })
    },
    orderSearch(){
      this.createList(this.rowId)
    }
  }
}
</script>


<style scoped lang="stylus">
.fa {
  color: #0a6aa1;
  display: block;
}

.sheng {
  color: #ff0000;
  display: block;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
}
img {
  width: 100%;
  height: 100%;
}

</style>
